<template>
    <div class="fixed">
        <div class="m-view-scroll">
            <M_header title="弹出"/>

            <div class="content-row">
                <div class="content-list" @click="selection_show()">
                    <div class="content-list-cen">
                        <div class="content-list-cen-title">{{ msg }}</div>
                        <div class="iconfont icon-jiantou"></div>
                    </div>
                </div>
            </div>


            <div class="Mui_mack" v-if="ShowOrHide" @click="selection_show()"></div>

            <div class="selection_window" :class="{'bottom_0':isClass}">
                <div class="selection_headline">
                    <div class="selection_btn" @click="selection_show()">取消</div>
                    <div class="selection_title">{{ msg }}</div>
                    <div class="selection_btn" @click="selection_complete()">完成</div>
                </div>
                <div class="selection_box">

                    <div class="selection_list" v-for="(items,index) in selection_list" @click="selection_list_click(items.selection_list_l,index)">
                        <div class="selection_list_l">
                            {{ items.selection_list_l }}
                        </div>
                        <div class="selection_list_r">
                            <span class="iconfont" :class="{'icon-guanbi':index==isClass_xz}" ref="'selection_list_icon'+index"></span>
                        </div>
                    </div>

                </div>
            </div>


        </div>
    </div>
</template>

<script>
    import M_header from "@/components/m-header/m-header.vue";
    export default {
        name: "popup_selection",
        components: {
            M_header,
        },
        data() {
            return {
                msg: '请选择',
                ShowOrHide: false,
                isClass:false,
                isClass_xz:null,
                tstit:'',
                selection_list: [
                    {id:0, selection_list_l:'选择1'},
                    {id:1, selection_list_l:'选择2'},
                    {id:2, selection_list_l:'选择3'},
                    {id:3, selection_list_l:'选择4'},
                ]
            }
        },
        methods: {
            selection_show() {
                this.ShowOrHide = !this.ShowOrHide;
                this.isClass = !this.isClass;
            },
            selection_list_click(title,index) {
                this.tstit = title;
                this.isClass_xz=index;
            },
            selection_complete() {
                if(this.tstit == ''){
                    this.msg = this.msg
                }else {
                    this.msg = this.tstit;
                }
                this.ShowOrHide = !this.ShowOrHide;
                this.isClass = !this.isClass;
            }
        }
    }
</script>

<style scoped>

</style>